<template>
  <div class="home-head">
    <div class="weather-date">
      {{ nowStr }}
      <img class="sun-pic" src="../assets/sun.png">
      <span class="weather">晴</span>28~32℃
    </div>
    <div class="title">
      <img class="big-data" src="../assets/福州三中滨海校区智慧校园物联网大数据.png" alt="" />
    </div>
    <div class="right-title"></div>
  </div>
</template>

<script>
let tickTimer;

export default {
  data() {
    return {
      now: new Date(),
    };
  },

  computed: {
    nowStr() {
      const weeks = ['日', '一', '二', '三', '四', '五', '六'];

      const { now } = this;
      const y = now.getFullYear();
      const m = now.getMonth() + 1;
      const d = now.getDate();
      const h = now.getHours();
      const k = now.getMinutes();
      const s = now.getSeconds();
      const w = now.getDay();

      return `${y}年${m}月${d}日 ${h}时${k}分${s}秒 星期${weeks[w]}`;
    },
  },

  created() {
    this.tick();
  },

  beforeDestroy() {
    clearInterval(tickTimer);
  },

  methods: {
    tick() {
      tickTimer = setInterval(() => {
        this.now = new Date(this.now.getTime() + 1000);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-head {
  display: flex;
  justify-content: space-between;
  color: #fff;
  white-space: nowrap;
}

.weather-date {
  background-image: url("../assets/左.png");
  height: 2.917vw;
  width: 26vw;
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 0.938vw;
  display: flex;
  align-items: center;
  position: relative;
  top: 0.729vw;
  overflow: hidden;
}

.sun-pic {
  width: 1.458vw;
  height: 1.458vw;
  margin-left: 0.833vw;
}

.weather{
  margin-left: 0.417vw;
  margin-right: 1.042vw;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/中.png");
  height: 4.219vw;
  width: 41.458vw;
  background-repeat: no-repeat;
  background-size: 100%;
}

.big-data {
  width: 31.719vw;
  height: 1.667vw;
}

.right-title {
  background: url("../assets/右.png");
  width: 26.302vw;
  height: 3.021vw;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;;
  top: 0.729vw;
}
</style>
